<template>
  <div class="data-analysis-view">
    <h1>数据分析</h1>
    
    <div class="chart-container">
      <el-card class="chart-card">
        <template #header>
          <div class="card-header">
            <span>数据趋势分析</span>
          </div>
        </template>
        <div class="chart-placeholder">
          <el-empty description="图表区域">
            <el-button type="primary">加载数据</el-button>
          </el-empty>
        </div>
      </el-card>
    </div>
    
    <div class="data-table">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>数据分析表格</span>
            <el-button type="primary" size="small">导出数据</el-button>
          </div>
        </template>
        
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="date" label="日期" width="180" />
          <el-table-column prop="name" label="名称" width="180" />
          <el-table-column prop="value" label="数值" />
          <el-table-column prop="trend" label="趋势">
            <template #default="scope">
              <span :class="scope.row.trend > 0 ? 'trend-up' : 'trend-down'">
                {{ scope.row.trend > 0 ? '↑' : '↓' }} {{ Math.abs(scope.row.trend) }}%
              </span>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const tableData = ref([
  {
    date: '2023-05-01',
    name: '用户增长',
    value: 1200,
    trend: 5.2
  },
  {
    date: '2023-05-02',
    name: '页面访问',
    value: 3500,
    trend: 8.7
  },
  {
    date: '2023-05-03',
    name: '转化率',
    value: 25.6,
    trend: -2.3
  },
  {
    date: '2023-05-04',
    name: '平均停留时间',
    value: '3:45',
    trend: 1.8
  }
])
</script>

<style scoped>
.data-analysis-view {
  padding: 20px;
}

h1 {
  margin-bottom: 20px;
}

.chart-container {
  margin-bottom: 20px;
}

.chart-card {
  width: 100%;
}

.chart-placeholder {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.data-table {
  margin-bottom: 20px;
}

.trend-up {
  color: #67C23A;
}

.trend-down {
  color: #F56C6C;
}
</style> 